<template>
  <view class="app-container p-20">
    <view class="my-card">
      <u-form ref="formRef" :model="form" label-position="top" label-width="200">
        <u-form-item label="姓名" prop="name" required>
          <u-input v-model="form.name" placeholder="请输入姓名"></u-input>
        </u-form-item>
        <u-form-item label="银行卡号码" prop="card_code" required>
          <u-input v-model="form.card_code" placeholder="请输入银行卡号码"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="p-20">
      <u-button type="primary" shape="circle" @click="handleSubmit">提交</u-button>
    </view>
  </view>
</template>

<script setup>
  import { onReady } from "@dcloudio/uni-app";
  import { reactive, ref } from "vue";
  import { useUserStore } from "../../store/user";

  const userStore = useUserStore();

  const formRef = ref();

  const form = reactive({
    bank_id: 1,
    name: "",
    card_code: "",
  });

  const rules = {
    name: [{ required: true, message: "请输入姓名", trigger: ["change"] }],
    card_code: [
      { required: true, message: "请输入银行卡号码", trigger: ["change"] },
      {
        pattern: /^\d{16,19}$/,
        message: "银行卡号码格式不正确",
        trigger: ["change"],
      },
    ],
  };

  async function handleSubmit() {
    const valid = await formRef.value.validate();
    if (valid) {
      const success = await userStore.fetchBindBankcard(form);
      if (success) {
        uni.$u.toast("绑定成功");
        uni.navigateBack();
      }
    }
  }

  onReady(() => {
    userStore.fetchSupportBankTypeList();
    formRef.value.setRules(rules);
  });
</script>

<style lang="scss" scoped></style>
